2025-0517-1500 Make interactive visual websites with Obsidian-Publish and the Excalidraw Plugin

Slip-box

To be fleeting notes

Fleeting

To be literature notes (Understanding)

L-Origin

Excalidraw-Publish: Make interactive visual websites with Obsidian-Publish and the Excalidraw Plugin - YouTube https://www.youtube.com/watch?v=JC1E-jeiWhI Transcript: (00:00) hey everyone jolt here many would argue that obsidian's power lies in its plug-in ecosystem I for one could not imagine my life in obsidian without many of the plugins I love and use every day obsidian publish is obsidian's web publishing service that allows you to seamlessly convert your markdown files into a VB page it is super easy to set up and super easy to use but unfortunately obsidian publish does not support plugins this is why I have been putting off publishing my own website because I wanted to make a visual website using exol raw I think I've solved the problem let me show you so this is my new web (00:54) page it only has a few pages now but I'm going to be extending this this is the opening page page with the three links that you can follow and if I click here on the about obsidian EXC colid link then you will see that this page loads here and on the page I have couple of embedded objects so for example I can start to play this video right there or if I want I can experiment with ex exol draw right here right within the web page and there are of course some additional links here as well if I come back to the vcom page I also have here another page that includes a process flow explaining the steps you need to (01:39) take to get excal draw work with obsidian publish and here I just want to point out that I have this embedded web page as well as I have this embedded page from obsidian publish itself so this is one of the files that you can also find here with the publish C CSS and JS files so let me show you how this looks on the obsidian side so in obsidian I have my files here for example here's my welcome exol file and you can see the Three Links here and all of my files are under the exol blog folder so you can see I have lots of other folders in obsidian but I can set up which folder I want to publish and for example if I look at my (02:35) publish JS and CSS files I just noticed that I have a spelling error here so I misspelled create so I make my changes and then I click here on publish changes and all I need to do is to click publish and then obsidian will publish the changed file and if I come back here and press F5 to reload then you can see that create was updated as well as of course if I click on my image right here then you can see that create was updated right there as well so this is how easy it is to get something out on obsidian publish once you've set it up so how do you set it up and how do you make exol draw work with it first of all you need (03:28) to subscribe to obsidian publish once you've subscribed to the service you will need to register a domain name this is because even the obsidian publish will give you a default domain and website obsidian does not allow publication of the published JS file which you require for exol draw to work I'm going to show you that in a second but first of all I want to show you that getting your own domain name is cheap and easy I like to use name cheap and let me just show you that for example I'm going to search for Bob's Garden as a domain name but I guess many other domain names could come to mind and what I want to show you here is (04:21) if you're not picky about the names so for example you're happy with Bob's Garden online or maybe you're happy with B Bob scard then. site then you can get these sites for as low as $1 per year it is really peanuts now once you've set up your own domain name you will need to follow the instructions on the obsidian website right here about setting up a cloud flare account and configuring your Cloud flare account it is also pretty simple and it's completely free so you come to Cloud flers page you sign up and you do the configurations as described in the obsidian help once you're set up with (05:08) that you will need to download the publish CSS and the publish JS files and by the way I just noticed that I've mistyped them here so we will correct it and publish it again just to see how it works and you can download the publish CSS and JS files from here and then the final thing you need to do is you need to configure exol draw to export svgs which I'm going to show you in just a second but let's first correct plug-in JS and plugin CSS because that is something that bothers me so I'm going to come here and I'm just going to change this to publish JS and bubish CSS and I'm going to press contrl (05:59) s to force save and then I'm going to click here on the publish icon which recognizes that my file. SVG so this is something you need to pay attention to this is what we're going to talk about has changed I click publish it's uploaded and when I open my site again I need to reload this page and as the page reloads you can see that I already have the publish JS and publish CSS there so I managed to correct my drawing this quickly on the web so how does this work well I want to show you that here on the page so this is my web page and so this looks a bit odd because I have a transparent background but I can actually show you (06:55) that we can uh do this with a non transparent background as well I prefer the transparent background but if we switch to here then if I just change this to false so this is the export transparent Now set to false and I now switch to excal draw and publish or save then if I come back here then you can see here I have my page here now notice that here I have the SVG file embedded and if I embed the SVG like this then the pages the web page and the internal page are not going to be interactive but that's not a problem when you publish this this is going to be interactive now one of the additional features that I'm now releasing is a new

(07:54) command pallet action that if I select the row where I have have the SVG file name then I can open exol drawing I can select this action and it will find me the excolo drawing corresponding to that SVG file and open it in exol draw so I can do my settings now in this file I'm doing a couple of things and let me just show you what I'm doing here and let me walk you through on some of these so first of all you you can see I have my front matter here now it is quite likely that in your case you have a different setting you might have the front matter hidden I think that is the default obsidian setup so then you don't see the (08:44) front matter when you switch to markdown View mode to see the front matter you need to come to settings editor and here properties in document you need to switch this I prefer Source mode you can also switch it to visible if I switch it to visible then I see this view which is quite practical but adding properties for excal draw for me is more convenient in the source mode so I'm going to show you how to do this in the source mode but you can of course do it in the visible mode as well I'm oldfashioned I actually like this view better so so for example I'm going to set this back to transparent true you (09:34) can see here that I have a front matter switch here or property exol Auto export SVG so how did I know that this is here if I start to type exol draw Auto export then in the source mode it will promt me with also a bit of help what I can type here and I'm going to type in as VG so this way what I'm configuring is that this drawing specifically I want to automatically export to SVG every time I save this file and this is convenient because I don't want all of my drawings to be exported automatically to SVG if you always want to insert SVG you can also come to plug-in settings and here under exol draw embed into your notes (10:31) you can choose under export settings Auto export settings you can choose to Auto export SVG if you make this setting then all of your drawings are automatically going to be saved and as an SVG file next to the page this is actually good if you're concerned about the longevity of your excal drawings because every time you modify a drawing there's going to be a hard copy in SVG by the way the exol publish feature only works with SVG files you can also once you set up Auto export to SVG you can also come here and change the type of file to insert into the document when you select create embed new drawing so (11:23) you could change this to SVG and here now I have a new setting that you can disable adding a comment with the links under this I'm not going to go into the details here you can experiment with this yourself I prefer the following settings I like to insert excal drawings into my drawings and I don't like Auto export SVG because I don't need all those SVG files but if you want that's another solution instead I come to the markdown View mode of my drawing and I add the auto export SVG switch to the drawings I want to export to SVG and so when now I save the drawing then that drawing is going to be updated (12:17) here in terms of the embedding here it is very easy to switch to SVG because if I just delete the SVG then you can see that the EXC colit draw is embedded now in this case this is not going to work with obsidian publish if I publish it like this then it's not going to be an image it's just going to be text so you need to switch this to SVG and as I showed you you can use the command pallet action to open the file in exol now the other feature I want to show you is here I support CSS classes and I've added so far a single CSS class to my publish CSS and that is the ex page height which will transform your (13:15) drawing on the web page to be as high as your page if it fits with the width and I want to show you that for example in case of this file the welcome exol draw here I don't have that switch and as a consequence this is not going to be as high as the page allows so let me show you how this looks like you can look at the welcome and the welcome is as high as the width would uh require while and the other Pages for example the about the visual thinking Workshop page or the about obsidian exol draw page and the others are as high as the page allows because my thinking is I want to export a web page where you (14:09) always see an image and then you navigate to the next image so instead of scrolling up and down I want to navigate from image to image and create a visual website now in terms of the publish JS and CSS files what you need to do is you need to place them in your Vault rout so you can see here that in my Vault rout I have my publish JS and my publish CSS files now you might not see publish JS and publish CSS for this you need to go to plugin settings under files and you need to click here to detect all file extension so when I click this then you can see in the background those files disappeared and when I click again then (15:00) these files are shown again so you need to do this and also these files I'm not able to edit in obsidians so if I click on for example publish CSS then it will open in the default application on your machine I use notepad++ on Windows and this is where I edit the public CSS file I'm going to share the publish CSS file as well as the publish JS file and you can modify it to your liking or you can just simply use these files as they are now the final feature I want to show you is about updating the exol dra file so what do I mean if you look at this file right here then you can see that this includes links to two files in my Vault

(16:02) so just to show you how this works if I come here to how to set up obsidian publish and I rename this file I'm just going to add XXX to the end then exol through updates and places XXX after the file however what I also want to show you is if I open my welcome page right here and this is my embedded SVG if now I change the name of the file and I'm going to change this back to publish so I'm removing the XXX then this image is not updated and now you can imagine that as you're modifying your files you might not remember which files have changed and which have not for this reason I'm including a new command pallet action (16:58) and that's called exol draw obsidian publish find SVG and PG exports that are out of date and when I click on this it's going to collect data it finds two files one of them is actually because I'm linking a logo that it is not relevant because I'm not publishing this file but the other file is actually something I'm publishing so here I can actually select the files that I recognize I really need to update and I can just simply click here on open selected I also have a check recursive action if I click this it is going to find the same files the check recursive is interesting if you have exol dra (17:50) files that have other exol dra files decomposed within them because in in that case it might not be the top level file but one of the more detailed files that have been updated and you would need to republish those files but in this case I'm just going to keep it like this and I'm going to click on open selected and that will open this file there automatically of course the name of publish uh was updated and now if I press contrl S I save this and now if I I come over to my publish then it will notice that my publish SVG has changed in reality it hasn't but I changed it back and forth so obsidian (18:42) sees it as a change and I can publish my updated file this way I can ensure that my changes are reflected on my site and that's it this is how the publ service works I think this opens amazing opportunities for obsidian publish and for ex colid draw now the features I've shown you work with SVG files you can also export PNG files of course but the interactive components like the embedded videos or the embedded pages are not going to work with PNG they only work for SVG so I recommend using the SVG files thank you

Generate with Glarity.

L-My Words

L-Zotero citation key

To be permanent notes (Complete Ideas)

P-Self Explained Sentences

P-Connection

P-SlipBox